<style lang="scss">
.common-crud {
  .z-table__container {
    overflow: overlay;
    height: 300px;
    flex: unset;
  }
  @media screen and (min-width: 1024px) {
    .common-crud-mobile {
      display: none;
    }
  }
  @media screen and (max-width: 1024px) {
    .z-table__container {
      display: none;
    }
    .z-table__page {
      overflow: overlay;
    }
  }
}
</style>

<template>
  <div class="common-crud">
    <z-search-table :def="dataTable"
                    :selectable="false"  :selectableWidth="60" :sequence="true"
                    :tableAttrs="{border: true}"

                    :render-content="renderContent"
    >
      <template #table__action="scope">
        <template v-if="scope.id === 'row-action'">
          <el-button @click="exportScope.detail(scope.row)">详情</el-button>
          <el-button @click="exportScope.delRow(scope.row)" type="danger" >删除</el-button>
        </template>
      </template>

      <template #table__form__afterend>
        <zw-layout row class="a-space-mb-10">
          <div style="flex: 1">
            <el-button type="primary" @click="exportScope.showAdd">添加</el-button>
          </div>
          <div>
            <el-button @click="exportScope.exportF">导出</el-button>
          </div>
        </zw-layout>
      </template>

    </z-search-table>
  </div>
</template>

<script>
import {useDataTable} from "../../../../babel-static/helpers";

import CrudContentMobile from "@/components/CrudContentMobile";

export default {
  name: 'CommonCrud',
  components: {},
  props: {
    def: null,
    editCom: null
  },
  data() {
    CustomCusComponent.registerOnce(CrudContentMobile)
    let self = this;
    if (!this.def) {
      console.error('需要定义')
    }
    return {
      dataTable: useDataTable({
        ...this.def
      }),
      exportScope: {
        showAdd() {
          return self.$zDialog({
            content:self.editCom,
            props: {
              isEdit: true
            },
            dialogProps: {
              title: '添加'
            }
          }).then((formCtx) => {
            // self.$emit('added', res)
            console.log('added ', formCtx.getDataSyncV2())
          })
        },
        delRow(row) {
          return self.$confirm('请确认是否删除')
        },
        detail(row) {
          return self.$zDialog({
            content:self.editCom,
            props: {
              row: row,
              isEdit: false
            },
            dialogProps: {
              title: '详情'
            }
          })
        },
        exportF() {
          console.log('exportF', self.dataTable.getRecords())
        }
      }
    }
  },
  methods: {
    renderContent (h, {ctx, tableProps} = {}) {
      let self = this;
      const { data, tableHeight, rowKey } = ctx
      // console.log(data)
      return h('CrudContentMobile', {
        props: {
          data,
          exportScope: self.exportScope
        },
        class: 'common-crud-mobile'
      }, )
    },
  }
}
</script>


